<template>
	<view class="page-wrap fboxCol Xcenter Ycenter" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="card fboxCol Ycenter Xcenter" :class="{'action': cardAction}">
			<view class="hd font40 fwb color-E8CDA7"><template v-if="detail.firstPositionName">{{detail.firstPositionName}}-</template>{{detail.realName}}</view>
			<view class="bd fboxWrap Ycenter Xcenter">
				<view class="code-box fboxWrap Ycenter Xcenter">
					<view class="dots">
						<view class="dot dot-1"></view>
						<view class="dot dot-2"></view>
						<view class="dot dot-3"></view>
						<view class="dot dot-4"></view>
						<view class="dot-arrow"></view>
					</view>
					<view class="code fboxCol Ycenter Xcenter">
						<!-- #ifdef MP-WEIXIN -->
						<image class="code-img" :src="WeChatCodeUrl" mode=""></image>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<image class="code-img" :src="detail.codeUrl" mode=""></image>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class="ft fboxCol Ycenter">
				<image class="avatar" :src="detail.companyLogo || detail.avatar || detail.imagePhoto" mode="aspectFill"></image>
				<view class="tit font26">{{detail.firstCompanyName ? detail.firstCompanyName : detail.industry }} </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getVisitorCard, unlimitedQRCode} from '@/api/card.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				memberId: '',
				detail: {},
				cardAction: false,
				WeChatCodeUrl: ''
			}
		},
		onLoad(option) {
			if(option && option.memberId){
				this.memberId = option.memberId
				this.getDetail()
			}
			uni.setNavigationBarTitle({
				title: `名片码`
			})
		},
		methods: {
			getDetail(){
				getVisitorCard({ cardId: this.memberId }).then(res=>{
					this.detail = res.data
					setTimeout(()=>{
						this.cardAction = true
					},1000)
				})
				
				// /pages/card/cardDetail?id=
				// #ifdef MP-WEIXIN
					unlimitedQRCode({
						param: 'p/0*id/'+this.memberId,
						// param: this.memberId,
						memberId: this.memberId
					}).then(res=>{
						this.WeChatCodeUrl = res.data
					})
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{ position: relative; height: 100vh;}
	.card{position: relative; transform:rotate(0deg);}
	.action{animation: mymove 1.5s;animation-fill-mode:forwards;}
	.bd{padding-right: 30rpx;}
    @keyframes mymove {
        100% {
            transform:rotate(180deg);
        }
    }
		
	.bd{height: 750rpx;position: relative;}
	.avatar{width: 80rpx;height: 80rpx;background: #FFFFFF;border: 1rpx solid #EDEEFA;border-radius: 12rpx;}
	.tit{margin-top: 24rpx;}
    .code-box { position: relative; width: 290rpx;height: 290rpx; }
	.code{position: absolute;top: 50%;left: 50%;margin: -125rpx 0 0 -125rpx; border:12rpx solid #fff; width: 290rpx;height: 290rpx; background: #fff;border-radius: 50%;overflow: hidden;z-index: 1;}
	.code-img{ position: relative; width: 185rpx;height: 185rpx;background-color:#fff;overflow: hidden;}
	
	// #ifdef MP
		.code-img{ width: 220rpx;height: 220rpx;}
		.code{background-color: #FFFFFF;}
	// #endif
	.dots{position: absolute;top: 50%;left: 50%;margin: -125rpx 0 0 -125rpx;width: 290rpx;height: 290rpx;z-index: 9;animation: turn 4s linear infinite;}
	.dot{position: absolute;top: 0;left: 0; width: 20rpx;height: 20rpx;z-index: 9;}
	.dot-1{background: #5280F6;border-radius: 50%;top: 100rpx;left: 0; }
	.dot-2,
    .dot-3{
	/* 	position: absolute;
		left: 50%; top: -6rpx; */
		left: 50%; top: -6rpx;
       width: 12rpx;
       height: 12rpx;
       background: #F1536D;
       border-radius: 50%;
	   z-index: 10;
    }
	.dot-3{
		left: 50%; top: auto;bottom: -4rpx;
		
	}
	.dot-4{
		left: auto; top: 50%;
		right: -5rpx;
		width: 10rpx;
		height: 10rpx;
		background: #62DD8F;
		border-radius: 50%;
	}
	.dot-arrow{
		/* left: -30rpx;
		top: 50%;
		margin: -8rpx 0 0; */
		border:16rpx solid transparent;
		position: absolute;top: 50%;left: -32rpx;
		/* transform-origin: 120rpx 120rpx; */
		border-right: 16rpx solid #5280F6;
	}
    @keyframes turn {
        100% {
            /* transform: rotateZ(-1turn); */
			
			transform: rotate(360deg);
			/* transform-origin: 0  0; */
        }
    }
    @keyframes turn2 {
        100% {
            transform: rotateZ(1turn);
        }
    }
</style>
